<template>
	<view class="store-page">
		<!-- <nav-bar title="" :showLeftIcon="true" :leftSlot="true">
			<template slot="leftSlot">
				<view class="header-box">
					<view class="logo"></view>
					<view class="head-name">
						运车网
					</view>
				</view>
			</template>
</nav-bar> -->
		<scroll-view class="content-box" scroll-y>
			<view class="logistics">
				<view class="title">
					<text>物流网点</text>
					<view class="location" @click="openSelectCity">
						<u-icon name="map-fill" color="#2979ff" size="16"></u-icon>
						<text>{{ positionEvent.cityName }}</text>
					</view>
				</view>
				<view style="text-align: center;" v-if="logisticsList.length <= 0">
					暂未有网点入驻
				</view>
				<view class="logistics-list" v-if="logisticsList.length > 0">
					<view v-for="(item, index) in logisticsList" :key="index" class="item-list">
						<view class="logistics-item row-between">
							<text>{{ item.companyName }}</text>
							<text v-if="item.crmNetworkPointsList && item.crmNetworkPointsList.length > 0"
								@click="clickMore('/subPages/settleIn/operationNetworkList?companyId=' + item.id + '&companyName=' + item.companyName)">查看更多</text>
						</view>
						<template v-if="item.crmNetworkPointsList && item.crmNetworkPointsList.length > 0">
							<view v-for="(dom, i) in item.crmNetworkPointsList" :key="dom.id">
								<text>{{ dom.networkPointsName }}</text>
								<view class="row-between">
									<text style="margin-right: 12rpx;">联系人：{{ dom.businessLeaderName }}</text>
									<!-- <text>联系电话：{{dom.businessLeaderPhone}}</text> -->
									<image src="@/static/images/public/phone.png" mode=""
										@click="callPhone(dom.businessLeaderPhone)"></image>
								</view>
							</view>
						</template>

						<view class="row-column-center" v-else>
							<text>暂无信息</text>
						</view>
					</view>
					<view class="more" @click="clickMore('/subPages/settleIn/operatingCompanyList')">
						<text>查看更多运营网点</text>
					</view>
				</view>
			</view>
			<view class="automobile-sell">
				<view class="title">
					<text>汽车销售公司</text>
					<text class="more" @click="clickMore('/subPages/enter/salesList')">查看更多</text>
				</view>
				<view v-if="carSaleList.length > 0">
					<view class="automobile-sell-list" @click="clickMore('/subPages/enter/salesDetails')">
						<view v-for="item, index in carSaleList" :key="index" class="item-list">
							<text>{{ item.companyName }}</text>
							<view>
								<text>联系人：{{ item.linkmanName }}</text>
								<text>联系电话：{{ item.phone }}</text>
							</view>
						</view>
					</view>
				</view>
				<view style="text-align: center;" v-else>
					暂无销售公司
				</view>

			</view>
			<view class="enter">
				<view class="title">
					<text>入驻选择</text>
				</view>
				<view class="enter-list">
					<view v-for="item, index in enterList" :key="index" class="item-list" @click="clickEnter(item)">
						<view class="img">
							<image :src="item.image" mode="widthFix"></image>
						</view>
						<view class="column-center">
							<text style="color: #1a1a1a;font-size: 30rpx;">{{ item.title }}</text>
							<!-- <text>{{item.intro}}</text> -->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- <liu-choose-address ref="scroll" @change='chooseSuccess' :key="isAddress"></liu-choose-address> -->
		<!-- <you-tabs :activeName="tabActive" :tabsList="tabsList" @tabClick="clickTabItem" :showMoreTab="true"></you-tabs> -->
		<!-- 	<you-scroll 
			:loadingHeight="loadingHeight" 
			:mainHeight="scrollHeight" 
			:isAllData="isAllData"
			:isRequestSuccess="isRequestSuccess" 
			@onRefresh="onRefresh" 
			@loadMore="loadMore">
			<template>
				
			</template>
		</you-scroll> -->
		<u-popup :show="isCityPopupShow" :safeAreaInsetBottom="false" @close="isCityPopupShow = false" mode="right">
			<you-index-adress @select="selectCity"></you-index-adress>
		</u-popup>
	</view>
</template>

<script>
import {
	baseIconUrl,
	baseImgUrl
} from '@/config'
import settleIn from '@/api/settleIn.js'
import { mapState } from 'vuex'
import { getToken, checkToken } from '@/utils/auth'
import Common from '@/api/common.js'
import { forEach } from 'jszip'
export default {
	name: 'Store',
	components: {},
	data() {
		return {
			loadingHeight: '',
			scrollHeight: '',
			logisticsList: [],
			enterList: [{
				title: '物流承运商入驻',
				intro: '这是一小段简短的关于此选项的介绍',
				image: '/static/images/enter/logistics.png',
				push: '/subPages/enter/logisticsCarriersEnter?type=1',
				type: '1'
			},
			{
				title: '物流网点申请',
				intro: '这是一小段简短的关于此选项的介绍',
				image: '/static/images/enter/dot.png',
				push: '/subPages/enter/logisticsCarriersEnter?type=2',
				type: '2'
			},
			{
				title: '汽车销售入驻',
				intro: '这是一小段简短的关于此选项的介绍',
				image: '/static/images/enter/sell.png',
				push: '/subPages/enter/salesCompany?type=3',
			},
			],
			carSaleList: [],
			// 查询条件
			positionEvent: {
				cityCode: '',
				cityName: ''
			},
			isCityPopupShow: false
		}
	},
	computed: {
		...mapState('global', {
			allCityComplete: 'allCityComplete'
		})
	},
	async onLoad() {
		this.scrollHeight = this.$store.getters.heightData.mainHeight - 48;
		this.loadingHeight = this.$store.getters.heightData.mainHeight - 68;
		this.getPosition();
	},
	async onShow() {
		this.salesList()
		Common.getInfo().then(res => {
			let { companyInfo, crmNetworkInfo, user } = res;
			// '0' 什么都没入驻  'c-' 承运商入驻（c-1 审核中  c-2 审核通过） 'n-' 网点入驻（n-1 审核中 n-2 审核通过）
			this.isCarrier = '0';
			if (companyInfo && companyInfo.isApproved) {
				if (companyInfo.isApproved == 1) {
					this.isCarrier = 'c-1';
				} else if (companyInfo.isApproved == 2) {
					this.isCarrier = 'c-2';
				} else {
					this.isCarrier = '0';
				}
			}
			console.log(crmNetworkInfo)
			if (crmNetworkInfo && crmNetworkInfo.isApproved) {
				if (crmNetworkInfo.isApproved == 1) {
					this.isCarrier = 'n-1';
				} else if (crmNetworkInfo.isApproved == 2) {
					this.isCarrier = 'n-2';
				} else {
					this.isCarrier = '0';
				}
			}
			uni.setStorageSync('userId', user.userId);
		})
	},
	methods: {
		getPosition() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log(res)
					this.$set(this.positionEvent, 'cityName', res.city);
					let index = this.allCityComplete.findIndex(ele => ele.cityName == res.city);
					console.log(index, this.allCityComplete)
					if (index > -1) {
						this.$set(this.positionEvent, 'cityCode', this.allCityComplete[index].id);
					}
					uni.setStorageSync('positionEvent', JSON.stringify(this.positionEvent))
					this.getCompaniesListFn();
				},
				fail: (err) => {
					console.log(err)
					this.$set(this.positionEvent, 'cityCode', '420100');
					this.$set(this.positionEvent, 'cityName', '武汉市');
					this.getCompaniesListFn();
				}
			});

		},
		callPhone(phone) {
			if (!checkToken()) return;
			uni.makePhoneCall({
				phoneNumber: phone,
				success: () => {

				},
				fail: (err) => {
				}
			});
		},
		async getCompaniesListFn() {
			let res = await settleIn.getCompanypointsList({
				city: this.positionEvent.cityCode,
				isTop: 1
			});
			let logisticsList = res.rows && res.rows.slice(0, 2) || [];

			// logisticsList.forEach(ele => {
			// 	this.getPointList(ele.id).then(r => {
			// 		this.$set(ele, "children", r);
			// 	});
			// })
			this.logisticsList = logisticsList;
			console.log(this.logisticsList)
		},
		// 获取网点
		async getPointList(id) {
			let res = await settleIn.getPointList({
				companyId: id,
				city: this.positionEvent.cityCode,
			});
			return res.rows && res.rows.slice(0, 1) || [];
		},

		// 获取销售公司
		async salesList() {
			let res = await settleIn.automobileMarketList({
				user_id: uni.getStorageSync('userId')
			});
			if (res.code == 200) {
				this.carSaleList = []
				res.rows.forEach(item => {
					if (item.whetherTop == 1) {
						this.carSaleList.push(item)
					}
				})
			}
		},

		clickMore(push) {
			uni.navigateTo({
				url: push
			});
		},
		clickEnter(item) {
			if (!checkToken()) return;
			if (this.isCarrier == "0") {
				uni.navigateTo({
					url: item.push
				});
			} else {
				if (item.type == '1') {
					this.componentSettle(item.push);
				} else {
					this.pointsSettle(item.push);
				}
			}

		},
		// 承运商入驻
		componentSettle(url) {
			if (this.isCarrier == 'n-1' || this.isCarrier == 'n-2') {
				if (this.isCarrier == 'n-1') {
					uni.showToast({
						title: "您已申请网点入驻,请耐心等待审核",
						icon: 'none'
					});
				}
				if (this.isCarrier == 'n-2') {
					uni.showToast({
						title: "您已入驻网点，不能再申请承运商入驻~",
						icon: 'none'
					});
				}
				return;
			} else if (this.isCarrier == 'c-1') {
				uni.navigateTo({
					url: '/subPages/enter/notExamine?type=1'
				});
				return;
			} else if (this.isCarrier == 'c-2') {
				uni.navigateTo({
					url: '/subPages/enter/logisticsCarriersDetail?type=1'
				});
				return;
			}
			uni.navigateTo({
				url
			});
		},
		// 网点入驻
		pointsSettle(url) {
			if (this.isCarrier == 'c-1' || this.isCarrier == 'c-2') {
				if (this.isCarrier == 'c-1') {
					uni.showToast({
						title: "您已申请承运商入驻，请耐心等待审核",
						icon: 'none'
					});
				}
				if (this.isCarrier == 'c-2') {
					uni.showToast({
						title: "您已入驻承运商，不能再申请网点入驻~",
						icon: 'none'
					});
				}
				return;
			} else if (this.isCarrier == 'n-1') {
				uni.navigateTo({
					url: '/subPages/enter/notExamine?type=2'
				});
				return;
			} else if (this.isCarrier == 'n-2') {
				uni.navigateTo({
					url: '/subPages/enter/logisticsCarriersDetail?type=2'
				});
				return;
			}
			uni.navigateTo({
				url
			});
		},
		chooseSuccess(e) {
			console.log(e);
			if (e.value.length > 1) {
				this.pageInfo = {
					pageSize: 10,
					pageNum: 1,
					total: 0
				}
				this.$set(this.positionEvent, 'cityCode', e.value[1].value);
				this.$set(this.positionEvent, 'cityName', e.value[1].label);
				uni.setStorageSync('positionEvent', JSON.stringify(this.positionEvent))
				this.getCompaniesListFn();
			}

		},
		openSelectCity() {
			// this.$refs.scroll.open();
			this.isCityPopupShow = true;
		},
		selectCity(e) {
			this.$set(this.positionEvent, 'cityCode', e.id);
			this.$set(this.positionEvent, 'cityName', e.cityName);
			uni.setStorageSync('positionEvent', JSON.stringify(this.positionEvent))
			this.isCityPopupShow = false;
			this.getCompaniesListFn();
		}
	}
}
</script>
<style lang="scss" scoped>
.header-box {
	display: flex;
	align-items: center;

	.logo {
		width: 64rpx;
		height: 64rpx;
	}

	.head-name {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}
}

.store-page {
	background: #ffffff;
	height: 100%;

	.content-box {
		// height: calc(100vh - 188rpx);
		padding: 0 28rpx;
		background: #ffffff;

		.logistics {
			.title {
				justify-content: space-between;

				.location {
					font-size: 28rpx;
					display: flex;
				}
			}

			.logistics-list {
				padding-top: 10rpx;
				box-sizing: border-box;
				background: #f4fbff;
				border-radius: 20rpx;
				border: 2rpx solid #9bd5ff;

				.item-list {
					padding: 0 20rpx;

					.logistics-item {
						color: #3287ff;
						font-size: 26rpx;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}

					>view {
						// display: flex;
						// justify-content: space-between;

						// &:first-child {
						// 	text {
						// 		&:last-child {
						// 			color: #3287ff;
						// 			font-size: 26rpx;
						// 		}
						// 	}
						// }

						// &:last-child {
						// 	// display: flex;
						// 	// flex-direction: column;

						// 	view {
						// 		color: #808587;
						// 		font-size: 24rpx;
						// 		display: flex;
						// 		justify-content: space-between;
						// 	}
						// }
					}

					text {
						padding: 16rpx 0;
					}
				}

				.more {
					width: 100%;
					text-align: center;
					border-top: 2rpx solid #9bd5ff;
					padding: 20rpx 0;
					font-size: 26rpx;
					color: #3287ff;
				}
			}
		}

		.title {
			position: relative;
			display: flex;
			padding: 20rpx 0;
			padding-left: 12rpx;
			font-size: 34rpx;

			>text {
				&:nth-of-type(1) {
					font-weight: 550;
				}
			}

			&::after {
				position: absolute;
				left: 0;
				top: calc(50% - 12rpx);
				content: '';
				display: inline-block;
				width: 6rpx;
				height: 24rpx;
				background: #1777ff;
				border-radius: 2rpx;
			}
		}

		.automobile-sell {
			margin-top: 20rpx;

			.title {
				justify-content: space-between;

				.more {
					color: #3287ff;
					font-size: 26rpx;
				}
			}

			.automobile-sell-list {
				padding: 20rpx;

				// box-shadow: 2rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
				// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
				.item-list {
					margin-bottom: 20rpx;

					>view {
						display: flex;
						justify-content: space-between;
						margin-top: 20rpx;
						color: #808587;
						font-size: 24rpx;

						text {
							&:nth-of-type(2) {
								padding-right: 40rpx;
							}
						}
					}
				}
			}
		}

		.enter {
			margin-top: 20rpx;

			.enter-list {
				padding-bottom: 1rpx;

				.item-list {
					padding: 30rpx 40rpx;
					background: #f6fbff;
					border-radius: 16rpx;
					margin-bottom: 18rpx;
					display: flex;

					.img {
						width: 72rpx;
						height: 72rpx;

						image {
							width: 100%;
						}
					}

					view {
						&:last-child {
							margin-left: 40rpx;

							text {
								display: block;

								&:first-child {
									font-weight: 600;
									font-size: 30rpx;
								}

								&:last-child {
									font-size: 24rpx;
									color: #bcc0c3;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>